<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改货运订单')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-order-edit" th:object="${tudaOrder}">
            <h4 class="form-header h4">货运订单信息</h4>
            <input id="orderId" name="id" th:field="*{id}" type="hidden">
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label is-required">发起人ID：</label>-->
<!--                <div class="col-sm-8">-->
                    <input name="userId" th:field="*{userId}" class="form-control" type="hidden" required>
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">提验人：</label>
                <div class="col-sm-8">
                    <input name="vehicleInspector" th:field="*{vehicleInspector}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">业务员：</label>
                <div class="col-sm-8">
                    <select name="userName" class="form-control">
                        <option th:text="*{userName}"></option>
                        <option th:each="user:${userList}" th:value="${user.userName}+','+${user.phonenumber}" th:text="${user.userName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">车型：</label>
                <div class="col-sm-8">
                    <input name="vehicleModel" th:field="*{vehicleModel}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">车架号：</label>
                <div class="col-sm-8">
                    <input name="vin" th:field="*{vin}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">托运人：</label>
                <div class="col-sm-8">
                    <input name="client" th:field="*{client}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">托运人电话：</label>
                <div class="col-sm-8">
                    <input name="clientPhone" th:field="*{clientPhone}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">起始地：</label>
                <div class="col-sm-8">
                    <input name="origin" th:field="*{origin}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">目的地：</label>
                <div class="col-sm-8">
                    <input name="dest" th:field="*{dest}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">接收人：</label>
                <div class="col-sm-8">
                    <input name="receiver" th:field="*{receiver}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">接车人电话：</label>
                <div class="col-sm-8">
                    <input name="receiverPhone" th:field="*{receiverPhone}" class="form-control" type="number" minlength="11" maxlength="11">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">运费金额：</label>
                <div class="col-sm-8">
                    <input name="freightAmount" th:field="*{freightAmount}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">已付金额：</label>
                <div class="col-sm-8">
                    <input name="paidAmount" th:field="*{paidAmount}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">利润：</label>
                <div class="col-sm-8">
                    <input name="profit" th:field="*{profit}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="notes" th:field="*{notes}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">数据状态</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('is_delete')}">
                        <input type="radio" th:id="${dict.dictCode}" name="isDelete" th:value="${dict.dictValue}" th:field="*{isDelete}" disabled="disabled">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">支付类型</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('pay_type')}">
                        <input type="radio" th:id="${dict.dictCode}" name="payType" th:value="${dict.dictValue}" th:field="*{payType}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">提验费(单位/元)：</label>
                            <input  type="number" id="inspectionFee" name="inspectionFee" th:value="${tudaOrder.inspectionFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea type="text" id="inspection_notes" name="inspectionNotes" rows="3" style="width: 300px;" maxlength="150" placeholder="请输入内容">[[*{inspectionNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="inspection_state" th:value="${tudaOrder.inspectionState}">
                            <a th:class="${tudaOrder.inspectionState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('inspection_notes','inspection_state')">
                                <div th:text="${tudaOrder.inspectionState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">代驾费(单位/元)：</label>
                            <input type="number" id="drivingFee" name="drivingFee" th:value="${tudaOrder.drivingFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea type="text" id="driving_notes" name="drivingNotes" rows="3" style="width: 300px;" maxlength="150"  placeholder="请输入内容">[[*{drivingNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="driving_state" th:value="${tudaOrder.drivingState}">
                            <a th:class="${tudaOrder.drivingState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('driving_notes', 'driving_state')">
                                <div  th:text="${tudaOrder.drivingState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">加油费(单位/元)：</label>
                            <input type="number" id="refuelingFee" name="refuelingFee" th:value="${tudaOrder.refuelingFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea type="text" id="refueling_notes" name="refuelingNotes" rows="3" style="width: 300px;" maxlength="150"  placeholder="请输入内容">[[*{refuelingNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="refueling_state" th:value="${tudaOrder.refuelingState}">
                            <a th:class="${tudaOrder.refuelingState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('refueling_notes', 'refueling_state')">
                                <div  th:text="${tudaOrder.refuelingState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">小板费(单位/元)：</label>
                            <input type="number" id="smallBoardFee" name="smallBoardFee" th:value="${tudaOrder.smallBoardFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea type="text" id="small_board_notes" name="smallBoardNotes" rows="3" style="width: 300px;" maxlength="150"  placeholder="请输入内容">[[*{smallBoardNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="small_board_state" th:value="${tudaOrder.smallBoardState}">
                            <a th:class="${tudaOrder.smallBoardState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('small_board_notes', 'small_board_state')">
                                <div  th:text="${tudaOrder.smallBoardState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">叉车费(单位/元)：</label>
                            <input type="number" id="forkliftFee" name="forkliftFee" th:value="${tudaOrder.forkliftFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea type="text" id="forklift_notes" name="forkliftNotes" rows="3" style="width: 300px;" maxlength="150"   placeholder="请输入内容">[[*{forkliftNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="forklift_state" th:value="${tudaOrder.forkliftState}">
                            <a th:class="${tudaOrder.forkliftState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('forklift_notes', 'forklift_state')">
                                <div  th:text="${tudaOrder.forkliftState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">中介费(单位/元)：</label>
                            <input type="number" id="agencyFee" name="agencyFee" th:value="${tudaOrder.agencyFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea type="text" id="agency_notes" name="agencyNotes" rows="3" style="width: 300px;" maxlength="150"  placeholder="请输入内容">[[*{agencyNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="agency_state" name="agencyState" th:value="${tudaOrder.agencyState}">
                            <a th:class="${tudaOrder.agencyState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('agency_notes', 'agency_state')">
                                <div  th:text="${tudaOrder.agencyState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-group">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="margin: 5px 0px 0px 302px; width: 150px;">其他(单位/元)：</label>
                            <input type="number" id="otherFee" name="otherFee" th:value="${tudaOrder.otherFee}"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <textarea id="other_notes" name="otherNotes" maxlength="150" rows="3" style="width: 300px;" placeholder="请输入内容">[[*{otherNotes}]]</textarea>
                        </li>
                        <li>
                            <input type="hidden" id="other_state" name="otherState" th:value="${tudaOrder.otherState}">
                            <a th:class="${tudaOrder.otherState == 1 ? 'btn btn-warning btn-rounded btn-sm' : 'btn btn-primary btn-rounded btn-sm'}" onclick="submitNotes('other_notes', 'other_state')">
                                <div  th:text="${tudaOrder.otherState == 1 ? '结清' : '已结清'}"> </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <h4 class="form-header h4">货运中转信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">汽车图片：</label>
            </div>
            <div class="form-group">
                <div class="col-sm-4" style="width: 20%" th:if="${tudaOrder.carImgList != null}" th:each="imgs,status: ${tudaOrder.carImgList}">
                    <div class="contact-box">
                        <div class="text-center">
                            <a th:href="${imgs}" target="_blank">
                                <img th:src="${imgs}" class="imgcode" width="280px" height="280px">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">合同图片：</label>
            </div>
            <div class="form-group">
                <div class="col-sm-4" style="width: 20%" th:if="${tudaOrder.contractImgList != null}" th:each="imgs,status: ${tudaOrder.contractImgList}">
                    <div class="contact-box">
                        <div class="text-center">
                            <a th:href="${imgs}" target="_blank">
                                <img th:src="${imgs}" class="imgcode" width="280px" height="280px" alt="User Image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        function submitNotes(name, feeState){
            var fs = $("#"+feeState).val();
            if(fs == 1){
                var orderId = $("#orderId").val();
                var v = $("#"+name).val();
                table.set();
                $.modal.confirm("请确认此费用已结清", function() {
                    var url = ctx + "system/finance/updateOrderFee";
                    var data = { "orderId": orderId, "feeState": feeState, "feeName":name, "notes":v };
                    $.operate.submit(url, "post", "json", data);
                    if($("#"+feeState).val(2)){
                        setTimeout( function(){
                            window.location.reload();
                        }, 1200 );
                    }
                });
            }else {
                $.modal.msgSuccess("已结清，请勿重复操作");
            }
        }

        var prefix = ctx + "system/order";
        $("#form-order-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-order-edit').serialize());
            }
        }

        $(function() {
            var options = {
                data: [[${tudaOrder.tudaOrderTransferList}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'name',
                    align: 'center',
                    title: '中转段',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].name' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'transitBranch',
                    align: 'center',
                    title: '中转分公司',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input name='tudaOrderTransferList[%s].transitBranch' value='%s' onClick='selectDeptTree("+$.table.serialNumber(index)+")' id='treeName"+$.table.serialNumber(index)+"' type='text' placeholder='请选择中转分公司' class='form-control'><span className='input-group-addon'><i className='fa fa-search'></i></span>", index, value);
                        // var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transitBranch' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'headPhone',
                    align: 'center',
                    title: '分公司负责人',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<select name='tudaOrderTransferList[%s].headPhone' id='headPhone"+$.table.serialNumber(index)+"' class='form-control'><option value='"+value+"'>"+value+"</option> </select>", index, value);
                        // var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].headPhone' id='headPhone' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'plateNumber',
                    align: 'center',
                    title: '车牌号',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].plateNumber' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'transporter',
                    align: 'center',
                    title: '驾驶员',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transporter' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'transporterPhone',
                    align: 'center',
                    title: '驾驶员电话',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transporterPhone' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'amount',
                    align: 'center',
                    title: '到收费用',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].amount' value='%s'>", index, value);
                        return html;
                    }
                },

                // {
                //     field: 'owes',
                //     align: 'center',
                //     title: '欠反',
                //     formatter: function(value, row, index) {
                //         var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].owes' value='%s'>", index, value);
                //         return html;
                //     }
                // },

                {
                    field: 'transferFee',
                    align: 'center',
                    title: '中转费',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].transferFee' value='%s'>", index, value);
                        return html;
                    }
                },

                // {
                //     field: 'state',
                //     align: 'center',
                //     title: '结清状态',
                //     formatter: function(value, row, index) {
                //         var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].state' value='%s'>", index, value);
                //         return html;
                //     }
                // },

                {
                    field: 'notes',
                    align: 'center',
                    title: '备注',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='tudaOrderTransferList[%s].notes' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
            };
            $.table.init(options);
        });

        function addRow() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                name: "中转"+$.table.serialNumber(count),
                transitBranch: "",
                headPhone: "",
                plateNumber: "",
                transporter: "",
                transporterPhone: "",
                amount: "",
                // owes: "",
                transferFee: "",
                // state: "",
                notes: "",
            }
            sub.addRow(row);
        }

        var num;
        /* 用户管理-新增-选择部门树 */
        function selectDeptTree(index) {
            num = index;
            var treeId = $("#treeId").val();
            var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
            var url = ctx + "system/user/selectDeptTree/" + deptId;
            var options = {
                title: '选择部门',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = $.modal.getChildFrame(index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName"+num+"").val(body.find('#treeName').val());
            $.modal.close(index);

            if(body.find('#treeId').val() > 0){
                var url = ctx + "applet/user/selectDepUser/" + body.find('#treeId').val();
                $.get(url, function(data) {
                    var optionstring = "";
                    for (var i = 0; i < data.length; i++) {
                        optionstring += "<option value=\"" + data[i].phonenumber + "\" >" +data[i].userName +"-"+ data[i].phonenumber + "</option>";
                    }
                    $("#headPhone"+num+"").html(optionstring);
                });
            }
        }

        function doSubmitPhone(index, layero){
            var body = $.modal.getChildFrame(index);
            $("#headPhone").val(body.find('#headPhone').val());
            $.modal.close(index);
        }

    </script>
</body>
</html>